<template>
  <vc-side-menu
    :width="210"
    :menus="list"
    :dragOption="{
      dragClassName: 'test',
      handle: '.icon-sort',
      filter: '.is-disabled'
    }"
    :extraHeight="110"
    @dragEnd="handleDragEnd"
    :useMenuSelect="false"
  >
    <template #top>
      <div class="menu-top">
        <span class="title">我的监控组合</span>
        <i v-show="!isEditing" class="icon-menu" @click="toggleEditState(true)"></i>
        <span v-show="isEditing" class="confirm-btn" @click="toggleEditState(false)">完成</span>
      </div>
    </template>
    <template #menuItem="{ item }">
      <div class="menu-row" :class="{ 'menu-row-active': group.id === item.id }" @click="handleMenuClick(item)">
        <div v-show="!isEditing" class="right">
          <i class="icon icon-arrow"></i>
        </div>
        <div class="left">
          <img v-if="item.iconUrl" :src="item.iconUrl" class="icon-name" />
          <span class="name">
            {{ item.name }}
            <span v-if="item.isDefault === 1" class="system-default">系统默认</span>
          </span>
        </div>
        <div class="right">
          <i v-show="isEditing && item.isDefault !== 1" class="icon icon-sort"></i>
          <i v-show="isEditing && item.isDefault !== 1" class="icon icon-delete" @click.stop="openDeleteDialog(item)"></i>
        </div>
      </div>
    </template>
    <template #bottom>
      <div class="add-group-wrapper" @click="$emit('open', 'groupAdd')">
        <i class="icon-add"></i>
        <span class="add-text">新建组合</span>
      </div>
    </template>
  </vc-side-menu>

  <delete-dialog ref="deleteDialogRef" v-model="deleteDialog" :type="DELETE_TYPE.GROUP" :groupName="deleteGroupInfo.name" @delete="handleGroupDelete(deleteGroupInfo.id)"></delete-dialog>
</template>

<script setup lang="ts">
import DeleteDialog from './delete-dialog.vue';
import { type IGroup, DELETE_TYPE, deleteGroup, sortGroup } from '../apis';
import { VcMessage } from 'vc';

interface Props {
  groups: IGroup[];
  group: IGroup;
}
const { groups } = defineProps<Props>();

const emit = defineEmits<{
  (e: 'change', val: any): void;
  (e: 'refresh'): void;
  (e: 'open', val: string): void;
}>();

const list = ref<any>([]);

const isEditing = ref(false);
const toggleEditState = async (state: boolean) => {
  isEditing.value = state;
  if (!state) {
    emit('refresh');
  }
};
const deleteDialogRef = ref();
const deleteDialog = ref(false);
const deleteGroupInfo = reactive({
  id: 0,
  name: ''
});
const openDeleteDialog = (item: any) => {
  deleteGroupInfo.id = item.id;
  deleteGroupInfo.name = item.name;
  deleteDialog.value = true;
};
const handleGroupDelete = async (groupId: number) => {
  const res = await deleteGroup(groupId);
  if (res.code === 200) {
    VcMessage.success('删除成功');
    try {
      deleteDialogRef.value.close();
      emit('refresh');
    } catch {}
  } else {
    VcMessage.error('删除失败');
  }
};
const handleDragEnd = async (oldIndex: number, index: number) => {
  const currentTab = list.value[oldIndex];
  list.value.splice(oldIndex, 1);
  list.value.splice(index, 0, currentTab);
  const ids = list.value.map((item: any) => item.id + '');
  const res = await sortGroup(ids);
  if (res.code !== 200) {
    VcMessage.error('排序失败');
  }
};

const handleMenuClick = (item: any) => {
  emit('change', item);
};

const getList = () => {
  list.value = groups.map((group) => {
    return { ...group, ...{ path: group.id + '' } };
  });
};

defineExpose({
  getList
});
</script>

<style lang="scss" scoped>
:deep(.vc-menu-item){
  height: 48px;
}
.menu-top {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  .title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
  .icon-menu {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 24px;
    font-size: 13px;
    color: #02C680;
    background: rgba(0, 142, 244, 0.1);
    border: 0.5px solid rgba(0, 142, 244, 0.3);
    border-radius: 23px;
    cursor: pointer;
  }
}
.menu-row {
  margin: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .left {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    .icon-name {
      width: 14px;
      height: 14px;
    }
    .name {
      display: inline-flex;
      height: 40px;
      line-height: 40px;
      .system-default {
        margin-left: 10px;
        font-size: 12px;
        color: #999;
      }
    }
  }
  .right {
    display: flex;
    align-items: center;
    .icon {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .icon-arrow {
      margin-left: 12px;
      width: 16px;
      height: 16px;
      transition: all 0.2s;
      background-image: url('');
      
    }
    .icon-sort {
      width: 16px;
      height: 16px;
      background-image: url('');
    }
    .icon-delete {
      margin-left: 6px;
      width: 16px;
      height: 16px;
      background-image: url('');
    }
  }
}
.menu-row-active {
  background: rgba(231,247,243,0.3);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  .icon-arrow {
    background-image: url('') !important;
  } 
  .left {
    color: #02C680;
  }
}
.add-group-wrapper {
  width: 192px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(231,247,243,0.3);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid rgba(2,198,128,0.3);
  cursor: pointer;
  .icon-add {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .add-text {
    font-size: 14px;
    font-weight: 600;
    color: #02C680;
  }
}

:deep(.vc-side-menu__top) {
  border-bottom: none;
}
:deep(.vc-side-menu__bottom){
  padding: 0 8px 16px 8px;
  border-top: none;
}
:deep(.vc-menu-item) {
  padding: 0 !important;
}
</style>
<style lang="scss">
.vc-menu-item:hover{
    background-color: #fff !important;
  }
</style>
